<template>
  <div>
    <div class="storage-content-wrap">
      <div class="left-box" :class="{ fullWidth: templateSelection ? false : true }">
        <div class="left-box-title">存物管理</div>
        <div class="search-box-wrap">
          <div class="search-left-box">
            <div class="betweenTime-box">
              <el-date-picker
                v-model="dateRangeList"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="onSearch"
              />
            </div>
            <span class="payMethod-text">状态</span>
            <el-select v-model="searchParam.status" class="select" placeholder="请选择" @change="onSearch">
              <el-option
                v-for="item in expireStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="search-box">
            <div class="search-input-box">
              <img class="search-icon" src="@/assets/images/home/search-icon.png" alt="" />
              <input
                class="input"
                v-model.trim="searchParam.search"
                type="text"
                placeholder="输入关键词搜索"
                @input="onSearch"
              />
            </div>
          </div>
        </div>
        <div class="table-list-box">
          <el-table v-loading="loading" element-loading-text="加载中..." :data="tableDataList" @row-click="singleElection">
            <el-table-column label=" " width="30">
              <template #default="scope">
                <el-radio class="radio" v-model="templateSelection" :label="scope.row.storage_id">&nbsp;</el-radio>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip align="center" prop="storage_id" label="账单编号" />
            <el-table-column show-overflow-tooltip align="center" prop="item_name" label="物品名称" />
            <el-table-column show-overflow-tooltip align="center" prop="num" label="数量" />
            <el-table-column show-overflow-tooltip align="center" prop="user_name" label="物主姓名" />
            <el-table-column show-overflow-tooltip align="center" prop="mobile" label="联系电话" />
            <el-table-column show-overflow-tooltip align="center" prop="save_time" label="存放时间" />
            <el-table-column show-overflow-tooltip align="center" width="150" prop="keep_time" label="存放时限（分钟）" />
            <el-table-column show-overflow-tooltip align="center" label="到期状态">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.keep_status === 0">正常</el-tag>
                <el-tag type="danger" v-else-if="scope.row.keep_status === 1">过期</el-tag>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip align="center" prop="location" label="存放位置" />
            <el-table-column show-overflow-tooltip align="center" prop="clerk.real_name" label="存放人" />
            <el-table-column show-overflow-tooltip align="center" prop="remark" label="备注" />
          </el-table>
        </div>
        <div class="pagination-content">
          <Pagination
            @pagination="getUserStorageList"
            :total="pageListTotal"
            v-model:page="searchParam.page"
            v-model:limit="searchParam.limit"
            :pageSizes="[15, 45, 75, 100]"
          />
        </div>
        <div class="data-summary-box">
          <span class="summary-text"></span>
          <span class="btn-ordinary" v-if="templateSelection" @click="handleAction(1)">取物</span>
          <span class="btn-ordinary" @click="handleAction(2)">存物</span>
          <span class="btn-spec" @click="handleAction(3)">取物记录</span>
          <template v-if="templateSelection">
            <span class="btn-ordinary" @click="handleAction(4)">修改</span>
            <span class="btn-ordinary" @click="handleAction(5)">删除</span>
            <span class="btn-ordinary" @click="handleAction(6)">打印</span>
          </template>
          <span class="btn-ordinary" @click="handleAction(7)">返回</span>
        </div>
      </div>
      <div class="right-box" v-if="templateSelection">
        <StorageCard :templateSelection="templateSelection" />
      </div>
    </div>
    <Storage
      v-model:storageVisible="dialogData.isShowStorage"
      :actionType="actionType"
      :detailId="templateSelection"
      @onConfirm="onSearch"
    />
    <Take
      v-model:takeVisible="dialogData.isShowTake"
      :detailId="templateSelection"
      @onConfirm="onSearch"
    />
    <TakeList v-model:takeListVisible="dialogData.isShowTakeList" />
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import StorageCard from './components/StorageCard.vue'
import Storage from './components/Storage.vue'
import Take from './components/Take.vue'
import TakeList from './components/TakeList.vue'
import { userStorageList, userStorageDelete } from '@/api/userStorage'
import { debounce } from '@/utils/toolsValidate'
import { getStorageDetail, printerReprint } from '@/api/common'
import { useRouter } from 'vue-router'
import Pagination from '@/components/Pagination/Index.vue'

const router = useRouter()

const searchParam = reactive({ page: 1, limit: 15, search: null, status: -1, betweenTime: null })
const pageListTotal = ref(0)
const tableDataList = ref([])
const loading = ref(false)
const dialogData = reactive({ isShowStorage: false, isShowTake: false, isShowTakeList: false })
const expireStatusList = ref([
  { label: '全部', value: -1 },
  { label: '在门店', value: 0 },
  { label: '已取走', value: 1 }
])
const dateRangeList = ref([])
const templateSelection = ref('')
const actionType = ref('add')

onMounted(() => {
  getUserStorageList()
})

function handleAction(index) {
  if (index === 1) {
    dialogData.isShowTake = true
    return
  }
  if (index === 2) {
    actionType.value = 'add'
    dialogData.isShowStorage = true
    return
  }
  if (index === 3) {
    dialogData.isShowTakeList = true
    return
  }
  if (index === 4) {
    actionType.value = 'edit'
    dialogData.isShowStorage = true
    return
  }
  if (index === 5) {
    if (!templateSelection.value) {
      ElMessage.warning('请先选择对应的存物记录')
      return
    }
    ElMessageBox.confirm('您确认删除当前存物记录？', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        userStorageDelete({ storage_id: templateSelection.value }).then(res => {
          if (res.status === 200) {
            ElMessage.success('删除成功')
            templateSelection.value = ''
            getUserStorageList()
          }
        })
      })
      .catch(() => {})
    return
  }
  if (index === 6) {
    printStorage()
    return
  }
  if (index === 7) {
    router.back()
  }
}

function printStorage() {
  getStorageDetail({ storage_id: templateSelection.value }).then(res => {
    printerReprint({ ticket_id: res.data.detail.ticket_id }).then(() => {
      ElMessage.success('推送打印成功')
    })
  })
}

function singleElection(row) {
  templateSelection.value = row.storage_id
}

const onSearch = debounce(function (val) {
  if (val && Object.prototype.toString.call(val) === '[object Array]') {
    searchParam.betweenTime = [val[0] + ' 00:00:00', val[1] + ' 23:59:59']
  } else {
    searchParam.betweenTime = null
  }
  searchParam.page = 1
  getUserStorageList()
}, 500)

function getUserStorageList() {
  loading.value = true
  userStorageList(searchParam).then(res => {
    if (res.status === 200) {
      tableDataList.value = (res?.data?.list?.data) || []
      pageListTotal.value = (res?.data?.list?.total) || 0
      loading.value = false
    }
  }).finally(() => {
    loading.value = false
  })
}
</script>

<style lang="scss" src="./modules/StorageManagement.scss" scoped></style>
